import { CopyButton, LiftStatusChip, NameGradeCell } from '@/components'
import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-pro'
import OverviewActionButton from './OverviewActionButton'
import { AdvisorTypeMap, ColorList } from '@/store/constant'
import { AdvisorTypeEnum } from '@/types/enum'
import { grey } from '@mui/material/colors'
interface Options {
  refresh: () => void
}

const useColumns = ({ refresh }: Options) => {
  const columns: GridColDef[] = [
    {
      field: 'name_grade',
      headerName: '职级 + 用户名',
      width: 200,
      renderCell(params) {
        const { row } = params
        return <NameGradeCell row={row} copyKey="advisor_id" />
      }
    },
    {
      field: 'rank',
      headerName: '晋级阶段',
      renderCell(params: GridRenderCellParams) {
        const { row } = params
        return <LiftStatusChip row={row} />
      }
    },
    {
      field: 'star_ids',
      headerName: 'star_ids',
      width: 200,
      renderCell(params: GridRenderCellParams) {
        const { row } = params
        return (
          <>
            {row.star_ids.map((v: string) => (
              <Tooltip key={v} title={v}>
                <Chip
                  sx={{ width: '5rem' }}
                  size="small"
                  variant="outlined"
                  label={v}
                  color={'default'}
                  icon={<CopyButton value={v} />}
                />
              </Tooltip>
            ))}
          </>
        )
      }
    },
    {
      field: 'type',
      type: 'text',
      headerName: '顾问类型',
      renderCell(params: GridRenderCellParams) {
        const { row } = params
        return (
          <Chip
            size="small"
            variant="outlined"
            label={get(AdvisorTypeMap, row.type)}
            color={row.type === AdvisorTypeEnum.India ? 'primary' : 'default'}
          />
        )
      }
    },
    ...[
      { label: '培训开始', key: 'training_date' },
      { label: '考核开始', key: 'examine_date' },
      { label: '正式开始', key: 'work_date' }
    ].map(
      (v) =>
        ({
          field: v.key,
          headerName: v.label,
          minWidth: 200,
          type: 'text',
          renderCell(params: GridRenderCellParams) {
            const { row } = params
            return <Typography variant="body1">{get(row['train'], [v.key])}</Typography>
          }
        }) as GridColDef
    ),
    {
      field: 'init_grade',
      headerName: '初始职级',
      width: 100,
      renderCell(params: GridRenderCellParams) {
        const { row } = params
        const matchGrade = parseInt(row.train.init_grade?.match(/\d+/))
        const color = get(ColorList, matchGrade, grey)
        return (
          <Avatar sx={{ bgcolor: color[50], width: 30, height: 30 }} alt="grade">
            <Typography variant="subtitle1" color={color[800]}>
              {row.train.init_grade}
            </Typography>
          </Avatar>
        )
      }
    },
    {
      field: 'actions',
      headerName: '操作',
      width: 100,
      renderCell(params) {
        const { row } = params
        return <OverviewActionButton row={row} refresh={refresh} />
      }
    }
  ]
  return columns.map((v) => ({ ...v, headerAlign: 'center', align: 'center' })) as GridColDef[]
}

export default useColumns
